<template>
  <div class="dialog-transfer-body" id="dialog-transfer">
    <div class="filter-search" v-if="dialogType !=='stype'">
      <at-form :model="search" :inline="true">
        <at-form-item label="所属机构" v-if="dialogType === 'sysname'">
          <at-select v-model="search.sysname.bagency_name" placeholder="请选择">
            <at-option v-for="(item,index) in filterDataCopy.affiliation" :key="index" :label="item" :value="item">
            </at-option>
          </at-select>
        </at-form-item>
        <at-form-item label="所属区域" v-if="dialogType === 'sysname'">
          <at-select v-model="search.sysname.bbelong_area" placeholder="请选择">
            <at-option v-for="(item,index) in filterDataCopy.log_area" :key="index" :label="item" :value="item">
            </at-option>
          </at-select>
        </at-form-item>
        <at-form-item label="所属区域" v-if="dialogType !== 'sysname'">
          <at-select @change="changelocation" v-model="search.institution.area" placeholder="请选择">
            <at-option v-for="(item,index) in filterDataCopy.log_area" :key="index" :label="item" :value="item">
            </at-option>
          </at-select>
        </at-form-item>
        <div v-if="dialogType !== 'sysname'" class="form-cascader">
          <span class="cascader-label">所在地理位置</span>
          <at-cascader :change-on-select="true" :options="locations" :filterable="true" v-model="search.institution.location" placeholder="请选择"/>
        </div>
        <at-form-item>
          <div style="width: 832px; text-align: center">
            <at-button class="search-btn" type="primary" @click="searchEvent">确认</at-button>
            <at-button @click="searchClear">清空</at-button>
          </div>
        </at-form-item>
      </at-form>
    </div>
    <div class="filter-transfer">
      <at-transfer ref="transfer" v-model="selectData" filter-placeholder="输入关键字" filterable :render-content="renderFunc" :titles="['未选择网站', '已选择网站']" :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}'
      }" :data="data">
      </at-transfer>
    </div>
    <div class="btn">
      <at-button type="primary" @click="cofirmEvent()">确认</at-button>
      <at-button @click="cancelEvent()">取消</at-button>
    </div>
  </div>
</template>
<script>
import { mapActions, mapMutations, mapGetters } from 'vuex'
import { Notification } from 'atelement'
import { mixin } from '../../../models/safeEvents/utils/util'
export default {
  mixins: [mixin],
  props: {
    dialogType: String,
    required: true
  },
  data () {
    const generateData = _ => {
      const data = []
      for (let i = 1; i <= 1; i++) {
        data.push({
          key: i,
          label: `系统名称`
        })
      }

      return data
    }
    return {
      protectLevel: [1, 2, 3, 4, 5],
      search: {
        sysname: {
          bagency_name: '',
          bbelong_area: ''
        },
        institution: {
          area: '',
          location: []
        }
      },
      data: generateData(),
      selectData: [],
      renderFunc (h, option) {
        return <span>{option.label}</span>
      }
    }
  },
  computed: {
    ...mapGetters('safeEvents', [
      'filterDataCopy',
      'filterData',
      'location',
      'transferLeft',
      'stypeDict'
    ]),
    locations: {
      get () {
        return this.location
      },
      set (value) {
        this.SET_LOCATION(value)
      }
    }
  },
  methods: {
    ...mapMutations('safeEvents', [
      'SET_FILTER_DATA_ITEM',
      'SET_GROUP_CHOOSE',
      'SET_LOCATION'
    ]
    ),
    ...mapActions('safeEvents', ['GET_FILTER_GROUP_OTHER', 'GET_LOCATION']),
    // 获取全部名称信息
    getData () {
      this.data = []
      // 日志类型的显示需要中文的转换
      if (this.dialogType === 'stype') {
        for (let i = 0; i < this.transferLeft.length; i++) {
          this.data.push({
            key: this.transferLeft[i],
            label: this.translateChinese('stype', this.transferLeft[i], this.stypeDict)
          })
        }
      } else {
        for (let i = 0; i < this.transferLeft.length; i++) {
          this.data.push({
            key: this.transferLeft[i],
            label: this.transferLeft[i]
          })
        }
      }
    },
    // 确认选中
    cofirmEvent () {
      if (this.selectData.length === 0) {
        this.cancelEvent()
        this.selectData = []
        this.SET_FILTER_DATA_ITEM([this.filterDataCopy[this.dialogType], this.dialogType])
        // 清空筛选条件选中状态
        this.$emit('chooseChange', 'clearChoose')
        // let title = this.dialogType === 'sysname' ? '系统名称' : this.dialogType === 'stype' ? '日志类型' : '所属机构'
        // Notification.warning({
        //   title: `未选择${title}！`
        // })
      } else {
        this.cancelEvent()
        this.SET_FILTER_DATA_ITEM([this.selectData, this.dialogType])
        // 设置choose选中项
        this.$emit('chooseChange')
      }
    },
    // 点击取消按钮，隐藏对话框
    cancelEvent () {
      this.$emit('dialogCloseEvent')
    },
    // 数据置空
    clearEvent () {
      this.search = {
        sysname: {
          bagency_name: '',
          bbelong_area: ''
        },
        institution: {
          area: '',
          location: []
        }
      }
      // 清空左边搜索
      this.$refs.transfer.$children['0']._data.query = ''
      // 清空右边搜索
      this.$refs.transfer.$children['3']._data.query = ''
    },
    // 对话框打开时，将过滤条件赋给穿梭框已选择
    initData (choose) {
      this.selectData = choose
    },
    // 所属区域改变时，改变相应的地理位置
    changelocation () {
      this.search.institution.location = []
      this.GET_LOCATION({ area_name: this.search.institution.area })
    },
    // 清空搜索条件
    searchClear () {
      this.clearEvent()
    },
    // 搜索机构或网站名称
    searchEvent () {
      let data = {
        condition: {},
        type: this.dialogType
      }
      if (this.dialogType === 'stype') {
      } else if (this.dialogType === 'sysname') {
        data.condition = this.search.sysname
      } else {
        data.condition.area = this.search.institution.area
        if (JSON.stringify(this.search.institution.location) !== '[]') {
          data.condition.location = JSON.stringify(this.search.institution.location)
        }
      }
      this.GET_FILTER_GROUP_OTHER(data)
    }
  },
  created () {
  },
  watch: {
    transferLeft () {
      this.getData()
    }
  },
  mounted () {
  }
}
</script>
<style>
.dialog-transfer-body  {
  color: #5C6781;
}
.dialog-transfer-body .filter-search {
  border: 1px solid #eee;
  margin: 0 20px 20px;
  padding: 0px 13px 0px;
}
.dialog-transfer-body .filter-transfer {
  padding-left: 20px;
  padding-right: 10px;
}
.dialog-transfer-body .btn {
  width: 100%;
  border-top: 1px solid #eee;
  margin-top: 20px;
  /* padding: 20px; */
  text-align: center;
  padding: 0;
  height: 50px;
  line-height: 50px;
}
.dialog-transfer-body{
  padding-top: 20px;
}
.dialog-transfer-body .at-form-item__content .at-input .at-input__inner {
  width: 183px;
}
#dialog-transfer .at-select { width: 183px;} 
#dialog-transfer .at-form-item__label {
  padding: 11px 5px 11px 10px;
}
#dialog-transfer .form-cascader {
  font-size: 12px;
  top: 21px;
  display: inline-block;
  position: relative;
}
.form-cascader .cascader-label {
    display: inline-block;
    padding: 0 10px;
}
#dialog-transfer .at-cascader .at-input{
  width: 183px;
  border: 1px solid #fff;
}
#dialog-transfer .at-transfer-panel {
  width: 373px;
}
#dialog-transfer .at-transfer-panel__list {
  width: 368px;
}
#dialog-transfer .at-form-item__content {
  margin-right: 0px;
}
</style>
